<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1100px"
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      :rules="rules"
      class="demo-ruleForm"
      :disabled="title == '详情' ? true : false"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="接待名称" prop="rptId">
            <el-select
              v-model="form.rptId"
              style="width: 100%"
              placeholder="请选择"
              @change="rptChange"
            >
              <el-option
                v-for="item in backlogList"
                :key="item.id"
                :label="item.rptName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="接待编号" prop="rptNo">
            <el-input
              v-model="form.rptNo"
              disabled
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="form.taskName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务编号" prop="taskNo">
            <el-input
              disabled
              v-model="form.taskNo"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务类型" prop="taskType">
            <el-select
              v-model="form.taskType"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in dict.type.sys_reception_type"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任人" prop="taskUserId">
            <el-select
              v-model="form.taskUserId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in responsible"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-cascader
              v-model="form.taskUserIds"
              clearable
              style="width: 100%"
              :options="responsible"
              @change="selResponsible"
              ref="cascader"
            ></el-cascader> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务时间" prop="taskTime">
            <el-date-picker
              style="width: 100%"
              v-model="form.taskTime"
              type="datetime"
              placeholder="请选择"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工作内容" prop="taskDesc">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入"
              v-model="form.taskDesc"
              :maxlength="1000"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="taskFile">
            <el-input
              disabled
              placeholder="请选择文件"
              v-model="form.taskFile"
            />
            <el-upload
              class="upload-demo"
              action=""
              multiple
              :show-file-list="false"
              :http-request="taskFileHttpRequest"
            >
              <el-button
                v-if="title != '详情'"
                style="margin-left: 10px"
                type="primary"
                plain
                >上传</el-button
              >
              <el-button
                v-else
                :disabled="false"
                style="margin-left: 10px"
                type="primary"
                @click="downloadFile(form.taskFile)"
                >下载</el-button
              >
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        v-if="title != '详情'"
        type="primary"
        @click="submitForn"
        v-loading="saveLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import * as receptionApi from "@/api/system/task";
import { listReception } from "@/api/system/reception";
import { listUser, deptTreeSelect } from "@/api/system/user.js";
import commonUtil from "@/utils/common";
import { getSerialNumber } from "@/utils/index.js";
let people = [];
// let department = [];
export default {
  dicts: ["sys_reception", "sys_reception_type"],
  data() {
    return {
      title: "新建",
      dialogVisible: false,
      saveLoading: false,
      form: {
        rptId: undefined,
        rptNo: undefined,
        taskName: undefined,
        taskNo: undefined,
        taskType: undefined,
        taskUserId: undefined,
        taskTime: undefined,
        taskDesc: undefined,
        taskFile: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
      },
      backlogList: [],
      taskUserIds: undefined, // 责任人多级列表
      responsible: [],
      rules: {
        rptId: [{ required: true, message: "请输入接待名称", trigger: "blur" }],
        rptNo: [{ required: true, message: "请输入接待编号", trigger: "blur" }],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        taskNo: [
          { required: true, message: "请输入任务编号", trigger: "blur" },
        ],
        taskType: [
          { required: true, message: "请选择任务类型", trigger: "change" },
        ],
        taskUserId: [
          { required: true, message: "请选择责任人", trigger: "change" },
        ],
        taskTime: [
          { required: true, message: "请选择任务时间", trigger: "change" },
        ],
      },
    };
  },
  async mounted() {
    // await deptTreeSelect().then((response) => {
    //   // 获取部门列表
    //   this.responsible = response.data[0].children;
    // });
    // await this.disposeTree(this.responsible, people);
  },
  methods: {
    // 选择接待
    rptChange(e) {
      let data = [];
      data = this.backlogList.filter((item) => {
        return item.id == e;
      });
      if (data && data.length) this.form.rptNo = data[0].rptNo;
    },
    // disposeTree(responsible, people) {
    //   // 处理部门/人员树
    //   responsible.forEach((item) => {
    //     people.forEach((Item) => {
    //       if (item.id && item.id == Item.deptId) {
    //         if (!item.children) item.children = [];
    //         item.children.push(Item);
    //       }
    //     });
    //     if (item.children && item.children.length) {
    //       this.disposeTree(item.children, people);
    //     }
    //   });
    // },
    // selResponsible(e) {
    //   // 责任人切换事件
    //   function reset() {
    //     this.$nextTick(() => {
    //       this.form.taskUserId = undefined;
    //       this.taskUserIds = undefined;
    //       this.$refs.cascader.$refs.panel.checkedValue = [];
    //       this.$refs.cascader.$refs.panel.activePath = [];
    //       this.$refs.cascader.$refs.panel.syncActivePath();
    //     });
    //   }
    //   if (e && e.length) {
    //     let flag = true;
    //     e.forEach((item) => {
    //       if (item) {
    //         this.form.taskUserId = item;
    //         flag = false;
    //       }
    //     });
    //     if (flag) reset();
    //   } else {
    //     reset();
    //   }
    // },
    // **** 提交 * /
    submitForn() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        // 新增/修改人
        this.form.createBy
          ? (this.form.updateBy = this.$store.state.user.name)
          : (this.form.createBy = this.$store.state.user.name);
        // 新增/修改时间
        this.form.createTime
          ? (this.form.updateTime = commonUtil.normalizeDateTimeString(
            new Date().getTime()
          ))
          : (this.form.createTime = commonUtil.normalizeDateTimeString(
            new Date().getTime()
          ));
        if (this.title == "新建") {
          // 新建
          this.saveLoading = true;
          try {
            let res = await receptionApi.addTask(this.form); // 新建
            if (res && res.code == 200) {
              this.$message({ message: "保存成功", type: "success" });
              this.$parent.getList();
              this.dialogVisible = false;
            }
          } finally {
            this.saveLoading = false;
          }
        } else {
          // 修改
        }

        // console.log(res, "提交");
      });
    },
    /***打开新增/编辑 **** ***/
    async open(type, row) {
      this.dialogVisible = true;
      this.title = type;
      if (!row || !row.taskNo) this.form.taskNo = getSerialNumber("TASK"); // 获取随机编号
      await this.getBacklog(); // 获取接待数据
      await listUser().then((res) => {
        // 获取人员列表
        res.rows.forEach((item) => {
          item.label = item.nickName;
          item.value = item.userName;
        });
        // people = res.rows;
        this.responsible = res.rows;
      });
      if (row) {
        this.form = { ...this.form, ...row, ...row.reception };
      }
    },
    // 下载附件
    downloadFile(url) {
      if (url) {
        window.location.href = url;
      } else {
        this.$message({ type: "warning", message: "该条记录没有附件内容" });
      }
    },
    // 获取接待数据
    async getBacklog(row) {
      let res = await listReception({
        pageNum: 1,
        pageSize: 1000,
        status: 1,
        reapply: true,
      });
      if (res && res.code == 200) this.backlogList = res.rows;
    },
    handleClose() {
      // 关闭
      // this.taskUserIds = undefined;
      this.$refs.form.resetFields();
    },
    async taskFileHttpRequest(data) {
      // 文件上传
      let formData = new FormData();
      formData.append("file", data.file);
      let res = await receptionApi.uploadFile(formData);
      this.form.taskFile = res.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button {
  padding: 7px 20px;
}
::v-deep .el-form-item__content {
  display: flex;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8eaea;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #e8eaea;
}
</style>
